<!-- 更多喜欢 -->
<template>
  <view class="more-like">
    <view class="like-name">
      喜欢这首歌的人也听
    </view>

    <view class="music-item"
          v-for="item in data"
          @click="musicClick(item.id)"
          :key="item.id">
      <image class="music-img"
             mode="scaleToFill"
             :src="item.pictrue">
      </image>

      <view class="music-name">
        <view class="name">
          {{item.musicName}}
        </view>
        <view class="info">
          <image v-if="item.dujia"
                 src="~@/static/img/dujia.png"></image>
          <image v-if="item.sq"
                 src="~@/static/img/sq.png"></image>
          {{item.singer}}-{{item.musicName}}
        </view>
      </view>

      <view class="iconfont iconbofang"></view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      /**
       * 更多喜欢歌曲 列表项点击事件
       * @param {String|Number} id 歌曲id
       */
      musicClick(id) {
        uni.redirectTo({
          url: `/pages/pageDetail/pageDetail?id=${id}`,
        })
      }
    }
  }
</script>

<style lang="scss"
       scoped>
  .more-like {
    padding: 0 30rpx;
    color: #FFFFFF;

    .like-name {
      font-size: 36rpx;
      padding: 50rpx 0;
    }

    .music-item {
      padding-bottom: 30rpx;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .music-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
      }

      .music-name {
        padding-left: 20rpx;
        flex: 1;

        .name {
          font-size: 28rpx;
          margin-bottom: 12rpx;
        }

        .info {
          display: flex;
          align-items: center;
          font-size: 22rpx;
          color: #ddd;

          image {
            transform: translateY(2rpx);
            width: 26rpx;
            height: 18rpx;
            margin-right: 10rpx;
          }
        }
      }

      .iconfont {
        font-size: 50rpx;
      }
    }
  }
</style>
